<template>
  <div class="workorder-list">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>生产工单管理</h2>
      <p>生产工单信息查询与管理</p>
    </div>

    <!-- 操作区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd" :loading="addLoading">
          <el-icon><Plus /></el-icon>
          新增工单
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
        <el-button type="info" @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
      <el-table 
        :data="tableData" 
        v-loading="loading" 
        stripe 
        border 
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="workorderCode" label="工单编码" width="150" />
        <el-table-column prop="workorderName" label="工单名称" width="200" show-overflow-tooltip />
        <el-table-column prop="object" label="生产对象" width="150" />
        <el-table-column prop="workorderState" label="工单状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStateTagType(row.workorderState)">
              {{ getStateText(row.workorderState) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度" width="120">
          <template #default="{ row }">
            <el-progress 
              :percentage="parseInt(row.progress)" 
              :color="getProgressColor(parseInt(row.progress))"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        <el-table-column prop="processflowCode" label="工艺流程编码" width="150" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleView(row)"
              :icon="View"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageIndex"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[8, 16, 32, 64]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情功能已移至OrderXiang.vue页面 -->

    <!-- 编辑对话框已移除，只保留详情功能 -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, Plus, Download, View } from '@element-plus/icons-vue'
import { getReadClient } from '@/Urls/AxiosHelper'
import { useRouter } from 'vue-router'

// 路由
const router = useRouter()

// 接口类型定义
interface WorkorderItem {
  id: number
  workorderCode: string
  workorderName: string
  object: string
  workorderState: number
  progress: string
  processflowId: number
  isDelete: boolean
  processflowCode?: string
  processflowName?: string
  processId?: number
}

// SearchForm接口已删除

interface Pagination {
  pageIndex: number
  pageSize: number
  total: number
}

interface Processflow {
  id: number
  name: string
}

// 响应式数据
const loading = ref(false)
const addLoading = ref(false)
const submitLoading = ref(false)
const tableData = ref<WorkorderItem[]>([])
const selectedRows = ref<WorkorderItem[]>([])

// 搜索表单已删除

// 分页
const pagination = reactive<Pagination>({
  pageIndex: 1,
  pageSize: 8,
  total: 0
})

// 详情功能已移至OrderXiang.vue页面

// 方法
const getStateText = (state: number) => {
  const stateMap: { [key: number]: string } = {
    0: '待开始',
    1: '进行中',
    2: '已完成',
    3: '已暂停'
  }
  return stateMap[state] || '未知'
}

const getStateTagType = (state: number) => {
  const typeMap: { [key: number]: string } = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: 'danger'
  }
  return typeMap[state] || 'info'
}

const getProgressColor = (percentage: number) => {
  if (percentage < 30) return '#f56c6c'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
}

// 获取工单列表
const fetchWorkorderList = async () => {
  try {
    loading.value = true
    const params = {
      pageindex: pagination.pageIndex,
      pagesize: pagination.pageSize
    }
    
    // 使用相对路径，通过Vite代理访问
    const apiClient = getReadClient(0)
    const response = await apiClient.get('/sellreadapi/api/Workorder/Workorderslist', { params })
    
    if (response.data && response.data.data) {
      tableData.value = response.data.data.data || []
      pagination.total = response.data.data.totalCount || 0
    }
  } catch (error) {
    console.error('获取工单列表失败:', error)
    ElMessage.error('获取工单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索功能已删除

// 刷新
const handleRefresh = () => {
  fetchWorkorderList()
}

// 新增
const handleAdd = () => {
  // 跳转到工单新增页面
  router.push('/OrdersAdd')
}

// 查看详情
const handleView = (row: WorkorderItem) => {
  console.log('查看工单详情:', row)
  // 跳转到详情页面
  router.push(`/OrderXiang/${row.id}`)
}

// 编辑和删除功能已移除，只保留详情功能

// 批量选择
const handleSelectionChange = (selection: WorkorderItem[]) => {
  selectedRows.value = selection
}

// 导出
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 分页
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageIndex = 1
  fetchWorkorderList()
}

const handleCurrentChange = (page: number) => {
  pagination.pageIndex = page
  fetchWorkorderList()
}

// 编辑和提交功能已移除，只保留详情功能

// 生命周期
onMounted(() => {
  fetchWorkorderList()
})
</script>

<style scoped>
.workorder-list {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.action-card {
  margin-bottom: 20px;
}

/* 搜索相关样式已删除 */

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.action-buttons .el-button {
  margin-right: 8px;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .workorder-list {
    padding: 10px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .el-button {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
}
</style>
